<template>
  <div class="name-form">
    <!-- 表单项：用户输入姓氏 -->
    <div class="form-item">
      <label>姓:</label>
      <!-- v-model双向绑定，当输入框内容变化时，firstName的值也会随之改变 -->
      <input type="text" v-model="firstName" class="input-field">
    </div>
    <!-- 表单项：用户输入名字 -->
    <div class="form-item">
      <label>名:</label>
      <input type="text" v-model="lastName" class="input-field">
    </div>
    <!-- 表单项：显示计算属性结果 -->
    <div class="form-item">
      <label>全名:</label>
      <!-- 使用双大括号语法显示计算属性fullName的值 -->
      <span class="full-name">{{fullName}}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 导入Vue的核心功能
import { ref, computed } from 'vue'

// ref函数：创建一个响应式数据，可以被Vue追踪变化
// 响应式数据是Vue的核心特性，当数据变化时，相关的视图会自动更新
const firstName = ref('康') // 初始值为'康'
const lastName = ref('东伟') // 初始值为'东伟'

/**
 * 计算属性(computed)：
 * 1. 计算属性是基于它的依赖进行缓存的，只有当依赖项发生变化时才会重新计算
 * 2. 相比于在模板中直接使用表达式，计算属性可以减少模板的复杂度
 * 3. 计算属性会自动追踪依赖的响应式数据，当依赖变化时自动更新
 * 4. 计算属性返回的是一个只读的响应式引用
 * 
 * 下面的fullName计算属性依赖于firstName和lastName：
 * - 当firstName或lastName任一值变化时，fullName会自动重新计算
 * - 如果它们没有变化，多次访问fullName会直接返回之前的计算结果，不会重复执行函数
 */
const fullName = computed(() => {
  console.log('计算属性被执行') // 可以通过控制台观察计算属性的执行时机
  return firstName.value + lastName.value // 在ref对象中，需要通过.value访问实际值
})

// 如果需要可写的计算属性，可以提供一个带有get和set函数的对象
// 例如：
/*
const fullNameWithSetter = computed({
  // getter函数：返回计算后的值
  get() {
    return firstName.value + lastName.value
  },
  // setter函数：当尝试修改计算属性值时触发
  set(newValue) {
    // 假设newValue的格式是"姓 名"
    const parts = newValue.split(' ')
    firstName.value = parts[0]
    lastName.value = parts[1] || ''
  }
})
*/

// 计算属性vs方法：
// 1. 计算属性是基于依赖缓存的，只有依赖变化时才会重新计算
// 2. 方法在每次触发重新渲染时都会执行
// 3. 对于需要进行大量计算的操作，使用计算属性会更高效
</script>

<style scoped>
/* 表单容器的样式 */
.name-form {
  max-width: 500px; /* 设置最大宽度 */
  margin: 30px auto; /* 上下间距30px，左右自动居中 */
  padding: 25px; /* 内边距25px */
  background: linear-gradient(145deg, #ffffff, #f6f7f9); /* 渐变背景 */
  border-radius: 15px; /* 圆角边框 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 阴影效果 */
}

/* 表单项的样式，使用flex布局 */
.form-item {
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 20px; /* 底部间距 */
}

/* 标签样式 */
.form-item label {
  width: 60px; /* 固定宽度 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  font-weight: 500; /* 字体粗细 */
}

/* 输入框样式 */
.input-field {
  flex: 1; /* 占据剩余空间 */
  padding: 10px 15px; /* 内边距 */
  border: 2px solid #e8e8e8; /* 边框 */
  border-radius: 8px; /* 圆角 */
  font-size: 15px; /* 字体大小 */
  color: #2c3e50; /* 字体颜色 */
  background-color: #fff; /* 背景色 */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 输入框获得焦点时的样式 */
.input-field:focus {
  outline: none; /* 移除默认的焦点轮廓 */
  border-color: #3498db; /* 改变边框颜色 */
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.2); /* 添加阴影效果 */
}

/* 全名显示区域的样式 */
.full-name {
  flex: 1; /* 占据剩余空间 */
  padding: 10px 15px; /* 内边距 */
  background-color: #3498db; /* 背景色 */
  color: white; /* 字体颜色 */
  border-radius: 8px; /* 圆角 */
  font-size: 15px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
}
</style>